<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui"/>
    <title>echarts图表报表</title>
    <script src="../../js/echarts.min.js"></script>
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../plugins/vue/vue.js"></script>
    <script src="../../api/member.js"></script>
    <script src="../../js/index.js"></script>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css">
    <script src="../../plugins/element-ui/index.js"></script>

</head>
<body>
<div id="app" class="my-box">
    <div class="my-box-right">
        <div style="float: left">
            <el-select v-model="selectedOption" placeholder="请选择">
                <el-option
                        v-for="(value, key) in sMap"
                        :label="key"
                        :value="key">
                </el-option>
            </el-select>
        </div>
        <div class="block" style="float: left">
            <el-date-picker
                    v-model="value2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
            </el-date-picker>
            <el-button type="primary" @click="getNextDaysInfo()">查询</el-button>
        </div>
    </div>
    <div id="main" style="height:450px;padding: 20px"></div>
    <div id="zhu" style="height: 400px;width: 1200px;"></div>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            id: '',
            sMap: new Map(),
            selectedOption: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: ''
        },
        methods: {
            async init() {
                axios.get('/scheme/person/' + this.id).then(res => {
                    this.sMap = res.data.data
                })
            },
            getInfo(key) {

            },
            getNextDaysInfo(){
                const params={
                    'id':this.id,
                    'dates':this.value2
                }
                axios.post('/scheme/getNextDaysInfo',params).then(res=>{
                    let arr= res.data.data
                    console.log(arr)
                    if (arr.length === 0){
                        this.$message.error(res.data.msg)}
                    else{
                        let title = []
                        let value = []
                        for (let i=0;i<arr.length;i++){
                            title.push(arr[i].schedule)
                            value.push(arr[i].rate)
                        }
                        console.log(title)
                        console.log(value)
                        let dom = document.getElementById('zhu');
                        let chart = echarts.init(dom);
                        let myoption;
                        myoption = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: title,
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: 'Direct',
                                    type: 'bar',
                                    barWidth: '60%',
                                    data: value
                                }
                            ]
                        };
                        myoption && chart.setOption(myoption);
                    }
                })
            }
        },
        created() {
            this.id = requestUrlParam('id')
            if (this.id) {
                this.init()
            }
        },
        watch: {
            selectedOption(key) {
                const params = {'key': key, 'id': this.id}
                axios.post('/scheme/getInfoByPerson/', params).then(res => {
                    let title = []
                    let value = []
                    for (var i = 0; i < res.data.data.length; i++) {
                        title[i] = res.data.data[i].rate
                        const date = new Date(res.data.data[i].belongTime); // 使用构造函数创建一个新的 Date 实例
                        const year = date.getFullYear(); // 获取年份
                        const month = date.getMonth() + 1; // 获取月份（注意月份从 0 开始，所以需要加 1）
                        const day = date.getDate(); // 获取日期
                        value[i] = `${year}-${month}-${day}`;
                    }
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        xAxis: {
                            type: 'category',
                            data: value
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: title,
                                type: 'line'
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                })
            }
        }
    });
</script>
</html>